<template>

  <el-form :model="ruleForm" :inline="false"  v-if="shopInsuranceBool">
    <!--交强险信息-->
    <el-card class="box-card"  shadow="never">

      <div slot="header" class="header-card">
        <span class="header-card-title">交强险信息</span>
        {{ activityId }}
      </div>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="租赁禀议保险公司:" v-if="isShow" prop="rentInsuranceCompany">
            <span>{{ ruleForm.rentInsuranceCompany }}</span>
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="投保渠道:" prop="insuranceChannels" v-if="isShow">
            <span>{{ selectDictLabel(dict.type.insurance_channels, ruleForm.insuranceChannels) }}</span>
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="被保险人:" v-if="isShow">
            <span>{{ ruleForm.jqxInsuredName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="交强险公司:" prop="jqxCompany" v-if="isShow">
            <span>{{ ruleForm.jqxCompany }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交强险公司编码:" prop="jqxCompanyCode" v-if="isShow">
            <span>{{ ruleForm.jqxCompanyCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交强险起保日:" prop="jqxExpectBeginTime" v-if="isShow">
            <span>{{ ruleForm.jqxExpectBeginTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="交强险到期日:" prop="jqxExpectEndTime" v-if="isShow">
            <span>{{ ruleForm.jqxExpectEndTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交强险性质:" prop="jqxInsuranceType" v-if="isShow">
            <span>
              {{ ruleForm.jqxInsuranceType == 1 ? '运营' : ruleForm.jqxInsuranceType == 2 ? '非运营' : '' }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交强险保费:" prop="jqxAmount" v-if="isShow">
            <span>{{ ruleForm.jqxAmount }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="车船税是否缴纳:" prop="carTaxStatus" v-if="isShow">
            <span>{{
                ruleForm.carTaxStatus == '1' ? '是' : ruleForm.carTaxStatus == '2' ? '否' : ""
              }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车船税:" prop="carTax" v-if="isShow">
            <span>{{ ruleForm.carTax }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow && ruleForm.insuranceChannels == 3">
          <el-form-item label="交强险保单号:" prop="jqxPolicyCode">
            <span>{{ ruleForm.jqxPolicyCode }}</span>
          </el-form-item>
        </el-col>
      </el-row>


    </el-card>

    <!--商业险信息-->
    <el-card class="box-card">

      <div slot="header" class="header-card">
        <span class="header-card-title">商业险信息</span>
      </div>

      <el-row :gutter="24">

        <el-col :span="8">
          <el-form-item label="租赁禀议保险公司:" v-if="isShow" prop="rentInsuranceCompany">
            <span>{{ ruleForm.rentInsuranceCompany }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="投保渠道:" v-if="isShow" prop="insuranceChannels">
            <span>{{ selectDictLabel(dict.type.insurance_channels, ruleForm.insuranceChannels) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="被保险人:" v-if="isShow">
            <span>{{ ruleForm.syxInsuredName }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商业险公司:" prop="syxCompany" v-if="isShow">
            <span>{{ ruleForm.syxCompany }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商业险保单号:" prop="syxPolicyCode" v-if="isShow && ruleForm.insuranceChannels == '3'">
            <span>{{ ruleForm.syxPolicyCode }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商业险公司编码:" prop="syxCompanyCode" v-if="isShow">
            <span>{{ ruleForm.syxCompanyCode }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商业险起保日:" prop="syxExpectBeginTime" v-if="isShow">
            <span>{{ ruleForm.syxExpectBeginTime }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商业险到期日:" prop="syxExpectEndTime" v-if="isShow">
            <span>{{ ruleForm.syxExpectEndTime }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商业险性质:" prop="syxInsuranceType" v-if="isShow">
            <span>{{
                ruleForm.syxInsuranceType == 1 ? '运营' : ruleForm.syxInsuranceType == 2 ? '非运营' : ''
              }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商业险保费:" prop="syxAmount" v-if="isShow">
            <span>{{ ruleForm.syxAmount }}</span>
          </el-form-item>
        </el-col>

        <el-col style="margin-bottom: 8px;">
          <div style="padding-bottom:8px;font-size: 16px;">保险套餐</div>
          <el-table :data="ruleForm.businessList" border size='mini'>
            <el-table-column align="center" prop="insuranceProName" label="商业险种"/>
            <el-table-column align="center" prop="insuranceQuota" label="保额/万元"/>
            <el-table-column align="center" label="保险费用/元" prop="insurancePrice"/>
          </el-table>
        </el-col>

      </el-row>
    </el-card>


    <!-- 其他保险 -->

    <!--备注-->


  </el-form>


</template>


<script>
export default {
  dicts: ['car_business_type', 'insurance_channels'],

  name: "shopInsurace",//店保组件 insuranceChannels === 2

  props: {
    value: {
      type: Object,
      default: {}
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
    activityId: {
      type: String,
      default: "",
    },
    pageConfig: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.obj, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('update:detailForm', {...target, [key]: value})
            return true
          }
        })
        return proxy
      }
    }
  },

  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          if (newVal.tableData) {
            this.obj = newVal.tableData[0]
          } else {
            this.obj = newVal
          }
        }
      },
      immediate: true,
      deep: true
    }
  },

  data() {
    return {
      isShow: true,
      obj: {},
      shopInsuranceBool: false,//店保
      formId:'',
      activityName:'',
    }
  },

  mounted() {
    let index = this.pageConfig.findIndex(a => a.activityId === this.activityId)
    if (index !== -1) {
      this.activityName = this.pageConfig[index].activityConfig.activityName
      this.formId = this.pageConfig[index].activityConfig.formId
    }
    //店保节点1 店保节点2
    if ((this.activityName === '询价单审批' || this.formId === '"1760129490704400385"') ||
        (this.activityName === '付款' || this.formId === '"1760130023175548930"')) {
      this.shopInsuranceBool = true
    }
  },

  methods: {
    handleShopInsurace() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      })
    },
    // 店保金额格式
    changeTable(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/

      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value
        } else {
          row[field] = ""
        }
      } else {
        row[field] = ""
      }
      // this.addAmountNun = this.addAmount(this.detailForm.carMaintainProjectList, 'price')


    },

    changeAmount(str) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/
      if (!msg.test(this.ruleForm[str])) {
        this.ruleForm[str] = ""
      } else {
        this.ruleForm[str] = this.ruleForm[str].toString().match(/^\d+(?:\.\d{0,2})?/)[0]
      }
    },

    //取消表单效验
    handleClearValidate() {
      this.$refs.ruleForm.clearValidate()
    },
    valid() {
      return new Promise((resolve) => {
        resolve(true);
      })
    },
  }

}
</script>


<style lang="scss" scoped>
.el-form {
  ::v-deep.el-form-item {
    display: flex;
    align-items: center;
  }

  ::v-deep.el-form-item__content {
    line-height: normal;
    flex: 1;
    margin-left: 0 !important;

  }

  ::v-deep.el-form-item__label {
    line-height: normal;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #464646;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;

  ::v-deep .el-card__header {
    padding: 0;
    height: 48px;
    margin: 0 14px;
    display: flex;
    align-items: center;

    .header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .header-card-title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 10px 14px;

  }

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 130px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    .top-card-right {
      flex: 1;
      font-size: 14px;
      line-height: 36px;
      margin-left: 20px;
    }
  }
}
</style>
